<script setup lang="ts">
defineOptions({
  name: "fabBtns"
});
import { ref, nextTick, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { PxMessage } from "px-ui";
import { useRouterStoreHook } from "@/store/modules/router";
import { useFabListSocket } from "@/hooks/useWebSocket";
import { importFabDataList } from "@/api/modules/fab";
import batchImport from "./batchImport.vue";

const router = useRouter();
const { proxy }: any = getCurrentInstance();

interface Props {
  isDisableDel: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  isDisableDel: true
});

const routerStore = useRouterStoreHook();

const emits = defineEmits(["add", "del", "import"]);

const timer = ref<any>(null);
const delay = ref<number>(500);
const tooltipVisible = ref<boolean>(false);
const warningVisible = ref<boolean>(false);
const showTooltip = ref<boolean>(true);
const importVisible = ref<boolean>(false);

const addHandler = () => {
  emits("add");
};

const delHandler = () => {
  emits("del", props.isDisableDel);
};

const downloadHandler = () => {
  proxy.download("post", "/fab/api/v1/downloadTemplate");
};

const importHandler = () => {
  importVisible.value = true;
};

const submitHandler = (flag: boolean = false) => {
  const message = "导入成功！";
  PxMessage.success(message);
  emits("import");
};

const mouseoverHandler = () => {
  clearInterval(timer.value);
};

const mouseleaveHandler = () => {
  (tooltipVisible.value || warningVisible.value) && warning();
};

const mouseleaveHandler2 = () => {
  warningVisible.value && warning();
};

const warning = () => {
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    showTooltip.value = !showTooltip.value;
  }, delay.value);
};

const closeWarning = async () => {
  tooltipVisible.value = false;
  await nextTick();
  warning();
};

const refresh = () => {
  if (!warningVisible.value) return;
  clearInterval(timer.value);
  tooltipVisible.value = false;
  warningVisible.value = false;
  showTooltip.value = true;
  const p = routerStore.getSubject.toLowerCase();
  const path = `/${p}/fab/alarm`;
  router.push({ path });
};

const initSocketFn = () => {
  useFabListSocket(
    "FAB_LIST_WARNING",
    () => routerStore.getSubject,
    () => {
      tooltipVisible.value = true;
      warningVisible.value = true;
      warning();
    },
    () => {
      showTooltip.value = false;
    }
  );
};

initSocketFn();
</script>

<template>
  <div class="fab-btns">
    <div class="fab-btns-left">
      <px-button v-has="`${routerStore.getSubject}_FAB_OVERVIEW_DEVICE_ADD`" type="primary" @click="addHandler"> 添加机台 </px-button>
      <px-button v-has="`${routerStore.getSubject}_FAB_OVERVIEW_DEVICE_DELETE`" plain type="primary" @click="delHandler"> 删除机台 </px-button>
      <px-button v-has="`${routerStore.getSubject}_FAB_OVERVIEW_DOWNLOAD`" plain type="primary" @click="downloadHandler"> 下载模板 </px-button>
      <px-button v-has="`${routerStore.getSubject}_FAB_OVERVIEW_UPLOAD`" plain type="primary" @click="importHandler"> 批量导入 </px-button>
    </div>
    <div class="fab-btns-right">
      <px-tooltip v-if="showTooltip" class="box-item" effect="danger" placement="left" popper-class="fab-search-warning" :visible="tooltipVisible">
        <template #content>
          <div class="tooltip-content" @mouseover="mouseoverHandler" @mouseleave="mouseleaveHandler">
            <span>有新的报警机台！</span>
            <px-icon @click="closeWarning"><Close /></px-icon>
          </div>
        </template>
        <px-icon :class="{ warning: warningVisible }" @click="refresh" @mouseover="mouseoverHandler" @mouseleave="mouseleaveHandler2">
          <WarnTriangleFilled />
        </px-icon>
      </px-tooltip>
    </div>
    <batchImport v-if="importVisible" v-model="importVisible" :uploadApi="importFabDataList" @submit="submitHandler" />
  </div>
</template>

<style lang="scss" scoped>
.fab-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;

  & > div {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    align-items: center;
  }

  .fab-btns-right {
    justify-content: flex-end;
    height: 24px;

    .warning {
      color: #f33 !important;
      cursor: pointer !important;
    }

    .px-icon {
      font-size: 24px;
      color: #aaa;
      cursor: not-allowed;
    }
  }
}
</style>
